<template>
  <div class="all-room">
    <header class="head">
      <div class="type">
        <strong>房间类型:</strong>
        <ul>
          <li v-for="type in $store.state.room.type" :key="type.id">
            <span @click="() => selectTypeRoom(type.id)">{{type.typeName}}</span>
            <i>/</i>
          </li>
        </ul>
      </div>
      <div class="floor">
        <strong>各楼层房间:</strong>
        <ul>
          <li v-for="num of 5" :key="num">
            <span @click="() => selectFloorRoom(num)">第{{num}}楼</span>
            <i>/</i>
          </li>
        </ul>
      </div>
      <div class="status">
        <strong>房间状态:</strong>
        <ul>
          <li v-for="state of $store.state.room.status" :key="state.status">
            <span @click="() => selectStatusRoom(state.status)">{{state.name}}</span>
            <i>/</i>
          </li>
        </ul>
      </div>
    </header>
    <div class="content">
      <ul class="room-list">
        <li v-for="item in state.roomList" :key="item.id">
          <RoomItem :data="item" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from 'vue'
import { getInstance } from '../utils/request'
import { message } from 'ant-design-vue'
import RoomItem from "../components/RoomItem.vue";
export default {
    name: "allRoom",
    components: {
      RoomItem,
    },
    // TODO: 分页处理
    setup(){
      const state = reactive({
        roomList: [],
        limit: 10,
        offset: 0,
        
      })
      onMounted(async () => {
        let res = await getInstance().get(`/room?page=${state.offset}&size=${state.limit}`);
        if(res.code === 0){
          state.roomList = res.data.content
        }else{
          message.error("加载数据失败.")
        }
      })

      const selectTypeRoom = async (id) => {
        let res = await getInstance().get(`/room/type/${id}?page=${state.offset}&size=${state.limit}`)
        if(res.code === 0){
          state.roomList = res.data.content;
        }else{
          message.error("获取数据错误。")
        }
      }

      const selectFloorRoom = async (num) => {
        let res = await getInstance().get(`/room/floor/${num}?page=${state.offset}&size=${state.limit}`);
        if(res.code === 0){
          state.roomList = res.data.content
        }else{
          message.error("加载数据失败.")
        }
      }

      const selectStatusRoom = async(status) => {
        let res = await getInstance().get(`/room/status/${status}?page=${state.offset}&size=${state.limit}`);
        if(res.code === 0){
          state.roomList = res.data.content
        }else{
          message.error("加载数据失败.")
        }
      }

      return {
        state,
        selectTypeRoom,
        selectFloorRoom,
        selectStatusRoom
      }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/pages/allRoom.scss";
</style>